<%@page import="com.muk.meis.model.service.report.ReportByScale"%>
<%@page import="java.text.DecimalFormat"%>
<%@page import="java.text.NumberFormat"%>
<%@page import="com.muk.meis.model.service.ReportService"%>
<%@page import="com.muk.meis.MEISConstance.DISTRICT"%>
<%@page import="com.muk.meis.MEISConstance.SCALE"%>
<%@page import="java.util.EnumSet"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MEIS</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/flot/excanvas.min.js"></script><![endif]-->
<link href="css/dropdown/themes/default/helper.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Beginning of compulsory code below -->

<link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/default/default.css" media="screen" rel="stylesheet" type="text/css" />

<link type="text/css" href="css/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.16.custom.min.js"></script>

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

<!-- / END -->

<script language="javascript" type="text/javascript"
	src="js/flot/jquery.flot.js"></script>
<style type="text/css">
.mesi_header_m {
	color: #F00;
}

</style>
<link href="css/meis.css" rel="stylesheet" type="text/css">
</head>
<body>
	<form>     
       <jsp:include page="menu.jsp"></jsp:include>


       <div style="position:relative;padding-top: 60px; padding-left:450px;">
                                      ปีการศึกษา
          <select>
               <option>2554</option>
               <option>2553</option>
          </select>
          <input type="button" class="button" value="ค้นหา">
       </div>       

       <div>
            <%
            ReportByScale reportByScale = new ReportByScale();
            String xmlReport = reportByScale.getByScaleXMLReport();
            %>
			<script type="text/javascript">
				$(function(){
		
	
					// Dialog			
					$('#dialog').dialog({
						autoOpen: false,
						width: 700,
						height: 550,
						buttons: {
							"Ok": function() { 
								$(this).dialog("close"); 
							}, 
							"Cancel": function() { 
								$(this).dialog("close"); 
							} 
						}
					});
					
					// Dialog Link
					$('#dialog_link').click(function(){
						$('#dialog').dialog('open');
						return false;
					});
					
					//hover states on the static widgets
					$('#dialog_link, ul#icons li').hover(
						function() { $(this).addClass('ui-state-hover'); }, 
						function() { $(this).removeClass('ui-state-hover'); }
					)
					
				});
			</script>       
			<style type="text/css">
				#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
				#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
				ul#icons {margin: 0; padding: 0;}
				ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
				ul#icons span.ui-icon {float: left; margin: 0 4px;}
			</style>
				<p>
				<a href="#" id="dialog_link" class="ui-state-default ui-corner-all">
					<span class="ui-icon ui-icon-newwin"></span>แสดงกราฟ
				</a>
				</p>
				
	            <!-- ui-dialog -->
				<div id="dialog" title="กราฟ">	
					<!-- amcharts script-->
					<!-- swf object (version 2.2) is used to detect if flash is installed and include swf in the page -->
					<script type="text/javascript" src="amcharts/flash/swfobject.js"></script>
			
					<!-- chart is placed in this div. if you have more than one chart on a page, give unique id for each div -->
					<div id="pie"></div>
				        <%
				        //ReportByOPEC reportByOPEC = new ReportByOPEC();
					    //String xmlOPEC = reportByOPEC.getXMLDataGraph();
						//System.out.println(xmlOPEC);
				        %> 
					    <script type="text/javascript">
					    
				            var params = {
				                bgcolor:"#FFFFFF"
				                };
				
						    var flashVars = {
						        path: "amcharts/flash/",
						        chart_settings: encodeURIComponent("<settings><background><alpha>100</alpha><border_alpha>20</border_alpha></background><legend><enabled>0</enabled><align>center</align></legend><pie><y>50%</y><inner_radius>30</inner_radius></pie><animation><start_time>2</start_time><start_effect>strong</start_effect><pull_out_time>1.5</pull_out_time></animation><data_labels><show>{title}: {value}</show><max_width>140</max_width></data_labels></settings>"),
						        chart_data: encodeURIComponent("<%=xmlReport%>"),
						        //settings_file: "test/settings.xml",
				                //chart_data: encodeURIComponent("<pie><slice title='United States'>19544</slice><slice title='Japan'>5455</slice><slice title='Unresolved'>4229</slice><slice title='France'>2313</slice><slice title='Germany'>2208</slice><slice title='United Kingdom'>2057</slice><slice title='India'>1771</slice><slice title='Russian Federation'>1495</slice><slice title='Korea, Republic of'>1281</slice></pie>"),
						        chart_id:"pie"
							};
				
					    	swfobject.embedSWF("amcharts/flash/ampie.swf", "pie", "600", "400", "8.0.0", "amcharts/flash/expressInstall.swf", flashVars, params);
				 
				        </script>
				 </div>
       </div>
              
       <div style="position:relative;padding-top: 20px; padding-left:30px;">
           <table border="1" width="1200px;" cellspacing="0px;" bordercolor="#CCCCCC">
              <caption style="position: relative;padding-bottom: 20px;">จำนวนนักเรียนแยกชายญิง  จำแนกตามขนาดโรงเรียน  รายอำเภอ  ปีการศึกษา 2554</caption>              
              <tr bordercolor="#CCCCCC" bgcolor="#ADFF5B">
                 <td align="center" rowspan="3">ขนาดโรงเรียน</td>
              	 <td align="center" colspan="21">อำเภอ / จำนวนนักเรียน</td>
              	 <td align="center" colspan="3" rowspan="2">รวมทั้งสิ้น</td>
              </tr>
              <tr bordercolor="#CCCCCC" bgcolor="#ADFF5B">
              	  <% for(DISTRICT district:EnumSet.allOf(DISTRICT.class)) {  %>
              	  <td colspan="3" align="center">
              	  	  <%=district.getMessageDisplay()%>
              	  </td>
              	  <%} %>
              </tr>
              <tr bordercolor="#CCCCCC" bgcolor="#ADFF5B">
              	 <% for(DISTRICT district:EnumSet.allOf(DISTRICT.class)) { %>
              	    <td align="center">ชาย</td>
              	    <td align="center">หญิง</td>
              	    <td align="center" style="color:#F00">รวม</td>
              	 <%} %>
              	    <td align="center">ชาย</td>
              	    <td align="center">หญิง</td>
              	    <td align="center" style="color:#F00">รวม</td>              	 
              </tr>
              <%
              ReportService service = new ReportService();
              NumberFormat formatter = new DecimalFormat("###,###,###");
              for(SCALE scale:EnumSet.allOf(SCALE.class)) {
                  Integer sumMan = 0;
                  Integer sumGirl = 0;
                  Integer sumAll = 0;
              %>
           	  <tr bordercolor="#CCCCCC" align="right">
           	     <td align="left" width="180px;"  
           	         bgcolor="#ADFF5B" 
           	         style="<%="padding-left:"+(scale.isSubScale()?"13px;":"2px;")%>">
           	         <%=scale.getMessageDisplay()%>
           	     </td>
           	     <% for(DISTRICT district:EnumSet.allOf(DISTRICT.class)) { 
           	           Integer[] data = service.getReportByScale(scale, district);
           	           Integer man = data[0];
           	           Integer girl = data[1];
           	           Integer all = data[2];
           	           sumMan += man;
           	           sumGirl += girl;
           	           sumAll += all;
           	     %>     
           	           <td align="right" width="40px;"><%=formatter.format(man)%></td>
           	           <td align="right" width="40px;"><%=formatter.format(girl)%></td>
           	           <td align="right" width="40px;" style="color:#F00"><%=formatter.format(all)%></td>
           	     <% }%>
           	     <td><%=formatter.format(sumMan)%></td>
           	     <td><%=formatter.format(sumGirl)%></td>
           	     <td style="color:#F00"><%=formatter.format(sumAll)%></td>
           	  </tr>
           	  <% } %>
           	  <tr bordercolor="#CCCCCC">
           	  	<td bgcolor="#ADFF5B" align="center" style="color:#F00">รวมทั้งสิ้น</td>
           	  	<%
           	  	Integer sumAllMan = 0;
           	  	Integer sumAllGirl = 0;
           	  	Integer sumAllAll = 0;
           	    for(DISTRICT district:EnumSet.allOf(DISTRICT.class)) {
           	  		Integer data[] = service.getReportByScaleSummary(district);
           	  		sumAllMan += data[0];
           	  		sumAllGirl += data[1];
           	  		sumAllAll += data[2];
           	  	%>
           	  	  <td align="right"><%=formatter.format(data[0]) %></td>
           	  	  <td align="right"><%=formatter.format(data[1]) %></td>
           	  	  <td align="right" style="color:#F00"><%=formatter.format(data[2]) %></td>
           	  	<%}%>
           	  	  <td align="right"><%=formatter.format(sumAllMan) %></td>
           	  	  <td align="right"><%=formatter.format(sumAllGirl) %></td>
           	  	  <td align="right" style="color:#F00"><%=formatter.format(sumAllAll) %></td>           	  	
           	  </tr>
           </table>
       </div>
       <jsp:include page="footer.jsp"></jsp:include>
	</form>
</body>
</html>